<template>
  <el-form :inline="true" class="form">
    <el-form-item :label="label + `:`">
      <el-input
        :placeholder="`请你输入搜索${label}`"
        v-model="keyword"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button icon="Search" type="primary" size="default" @click="search"
        >搜索</el-button
      >
      <el-button icon="Refresh" size="default" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref } from "vue";
defineProps({
  label: {
    type: String,
    default: "",
  },
});
//定义响应式数据:收集用户输入进来的关键字
const keyword = ref<string>("");
const $emit = defineEmits(["handleSearch", "handleReset"]);
//搜索按钮的回调
const search = () => {
  if (keyword.value) {
    $emit("handleSearch", keyword.value);
  }
};

//重置按钮
const reset = () => {
  $emit("handleReset");
  keyword.value = "";
};
</script>
<style scoped lang="scss">
.form {
  display: flex;
  justify-content: space-between;
}
</style>
